<!-- tabbar.we -->
<template>
	<div class="tabbar" id="tabbar"  :style="{transformOrigin:transformOrigin,height:tabbarHeight,opacity:bgopacity}">
		<div class="tabs"   v-for="(item, index) in tabs"  @click="switchPage(index)" >
			<image class="img" v-if="selected!==index" :style="{left:item.imgleft}" :src="item.image"></image>
			<image class="img" v-if="selected===index" :style="{left:item.imgleft}" :src="item.selectedImage"></image>
			<text class="text" :style="{color:selected===index?item.activeTitleColor:item.defaultTitleColor}">{{item.title}}</text>
			<text class="number" :style="{backgroundColor:item.labelColor}" :id="item.labelName" >{{item.label}}</text>
		</div>
	</div>
</template>

<style>
	.tabbar{
		flex-direction: row;
		justify-content: center;
		border-top-width:2px;
		border-top-color: rgb(197, 197, 197);
	}
	.tabs{
		position: relative;
		flex:1;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		bottom:0px;
	}
	.img{
		width:50px;
		height:50px;
		margin-top:10px;
	}
	.text{
		font-size:26px;
		margin-top:5px;
	}
	.number{
		position: absolute;
		bottom:55px;
		right:30px;
		color:#fff;
		border-radius: 20px;
		width:40px;
		height: 40px;
		font-size:28px;
		text-align:center;
		justify-content:center
	}
</style>

<script>
    const animation = weex.requireModule('animation')
    let modal = weex.requireModule('modal')
    module.exports = {
        props: {
            tabs:{ default: [] },
            selected:{ default: 0},//默认选中的tab
            tabbarHeight:{ default:"100px"},//tabbar高度
            bgopacity:{ default:1},
            transformOrigin:{ default:"center center"}
        },
        data: {
            imgleft:70,//默认四个tab的话就是70
            labelColor:"#db3652",
            current_translate:"show",
            controlAnim:0,//控制动画
        },
        created(){
            // 设置样式,支持3到5个tab
            if(this.tabs.length>4){
                this.imgleft = 50+(5-this.tabs.length)*30;
            }
            else{
                this.imgleft = 40+(5-this.tabs.length)*30;
            }
        },
        ready(){

        },
        methods: {
            switchPage(pageIndex){
                this.$emit("switchPage",{
                    page:pageIndex
                });
                this.onselected = pageIndex;
            },
            // 执行动画
            anim(styles,timingFunction,duration,callback){
                animation.transition(that._ids.tabbar.el.ref,{
                    styles:styles,
                    timingFunction:timingFunction,
                    duration:duration
                },callback);
            },
            // 显示tabbar
            tabbarShow(){

            },
            // 隐藏tabbar
            tabbarHide(){

            },
            // 显示tabbar
            tabbarState(data){
                if(data.state==="show"){
                    this.tabbarShow();
                }
                else{
                    // 隐藏tabbar
                    this.tabbarHide();
                }
            },
            // 执行动作
            // 接收父组件消息
            tabbarAccept(message){
                switch(message.action){
                    case "add":
                        // 自加
                        this.tabs[message.target].label++;
                        break;
                    case "minus":
                        // 自减
                        this.tabs[message.target].label--;
                        break;
                    case "set":
                        // 手动设置值
                        this.tabs[message.target].label = message.value;
                }
            }
        }
    }
</script>